<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #59375a;

        }
        #mune{
            display: flex;
            justify-content: center;
            align-items: center;

            margin:10vw auto;
            width: 35vw;
            height: 28vw;
        }
        form{
            width: 35vw;
            height: 28vw;
            background-color: #F2F2F2;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }

        #dhead{
            margin-top: -2vw;
            width: 100%;
            height: 8vw;
            background-color: #6D4A70;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        #dhead h2{
            color: white;
            padding-left: 3vw;
            font-weight: 500;
            font-family: 微軟正黑體;
        }
        #dhead p{
            color: white;
            font-family: 方正姚体;
            padding-right: 3vw;


        }
        dd{
            margin-bottom: 2vw;
        }
        dl{
            margin-bottom: 3vw;
        }
        .in{
            width: 28vw;
            height: 2.5vw;
            background-color: #f0eef0;
            border: 1px solid #e4e2e5;
        }
        #in1{
            background-image: url("img/ic_input_name.png");
            background-repeat: no-repeat;
            /*position: absolute;*/
            background-position: right;
         
        }
        #in2{
            background-image: url("img/ic_input_password.png");
            background-repeat: no-repeat;
            background-position: right;


        }
        li{

        }
        button{
            border: 0;
            background-color: #6D4A70;
            width: 8vw;
            height: 3vw;
            color: white;
            font-size: 2vw;
            margin-left: 3vw;
            border-radius: 12px;
        }
        button:hover{

        }
        #db{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 3vw;
        }
        a{
            text-decoration: none;
            color: #e4e2e5;
        }
        </style>
</head>
<body>
<div id="mune">
    <form id="f1" method="get" onsubmit="return sub()" action="dgluiggs.html" >
        <table>
            <thead>
                <div id="dhead">
                    <h2>Login Form</h2>
                    <p>x</p>
                </div>
            </thead>
            <tbody>
                <div>
                    <dl>
                        <dd>
                            <input class="in" id="in1" type="text" placeholder="Username" required >
                        </dd>
                        <dd>
                            <input class="in" id="in2" type="password" placeholder="*******" required>
                        </dd>

                    </dl>
                    <div id="db">
                        <button>sign&nbsp;in</button>
                        <a href="whjimima.html">Lost&nbsp;your&nbsp;Password?</a>

                    </div>

                </div>
            </tbody>

            <tfoot>

            </tfoot>
        </table>


    </form>
</div>
</body>
<script>

    function f1() {
        var in1 = document.getElementById(in1).value;
        var in11=in1[1];
        var test1 = /^[0-9]{1}[0-9a-z]$/

        if (in1.length>=6&&in1.length<=12&&test1.test(in1)){
            return true
        }else {
            return false
        }
    }
    function f2() {
        var in2 = document.getElementById(in2).value;
        var test2 = /^[0-9a-zA-Z]$/
        if (in2.length>=6&&in2.length<=12&&test2.test(in2)){
            return true
        }else {
            return false
        }
    }
    function sub() {
        if (f1()==true&&f2()==true){
            return true;
        }
            return false;

    }
</script>
</html>